import React, { useState, useEffect } from 'react';
import { Modal, Select, Input, Button, Form, Typography, message } from 'antd'; // 引入 message 用于提示
import axios from 'axios'; // 引入 axios
import { DOUBT_API } from "../../../api/config";


const { Option } = Select;
const { Text } = Typography;

// 封装公用弹窗组件
// 提取获取 API URL 的逻辑
const getApiUrl = (componentName, id) => {
  switch (componentName) {
    case "illegalElderly":
      return DOUBT_API.ELDERLY.UPDATE(id);
    case "illegalEcological":
      return DOUBT_API.ECOLOGICAL.UPDATE(id);
    case "illegalEmployment":
      return DOUBT_API.EMPLOYMENT.UPDATE(id);
    case "illegalFarmland":
      return DOUBT_API.FARMLAND.UPDATE(id);
    case "illegalFlexEmployment":
      return DOUBT_API.FLEX_EMPLOYMENT.UPDATE(id);
    case "illegalImmigration":
      return DOUBT_API.IMMIGRATION.UPDATE(id);
    case "illegalInternship":
      return DOUBT_API.INTERNSHIP.UPDATE(id);
    case "illegalStudent":
      return DOUBT_API.STUDENT.UPDATE(id);
    default:
      console.error('未识别的页面组件名称');
      return null;
  }
};

const IllegalDialog = ({ visible, onCancel, onOk, fetchElderlySubsidy,  record, componentName }) => {
    // console.log(record,'record')
    console.log(record,'record')
    console.log(componentName,'componentName')
  // 从传递过来的 record 数据中获取初始的 status 和 remark
  const [status, setStatus] = useState(record?.status || '');
  const [remark, setRemark] = useState(record?.remark || '');
  const id = record?.id;

  // 监听 visible 和 record 的变化，每次弹窗显示时更新状态和备注
  useEffect(() => {
    if (visible) {
      setStatus(record?.status || '');
      setRemark(record?.remark || '');
    }
  }, [visible, record]);

  // 点击确定按钮的处理函数
  const handleOk = async () => {
    const apiUrl = getApiUrl(componentName, id);
    if (!apiUrl) return;

    try {
      const response = await axios.put(
        apiUrl,
        { 
          status: status.toString(),
          remark: remark.toString() 
        }
      );
      console.log("更新状态成功:", response.data);
      message.success('状态更新成功');
      onCancel(); 
      if (fetchElderlySubsidy && typeof fetchElderlySubsidy === 'function') {
        fetchElderlySubsidy();
      }
    } catch (error) {
      console.error("更新状态失败:", error);
      message.error('状态更新失败');
    } 
  };

  // 点击取消按钮的处理函数
  const handleCancel = () => {
    // 移除清空内容的操作
    onCancel();
  };

  return (
    <Modal
      title="审核"
      visible={visible}
      onOk={handleOk}
      onCancel={handleCancel}
      okText="确定"
      cancelText="取消"
    >
      <Form.Item label={<Text>审核状态</Text>}>
        <Select
          style={{ width: '100%' }}
          placeholder="请选择状态"
          value={status}
          onChange={(value) => setStatus(value)}
        >
          <Option value="疑似违规">疑似违规</Option>
          <Option value="违规">违规</Option>
          <Option value="合理">合理</Option>
        </Select>
      </Form.Item>
      <Form.Item label={<Text>审核备注</Text>}>
        <Input
          type="textarea"
          placeholder="请输入备注"
          value={remark}
          onChange={(e) => setRemark(e.target.value)}
        />
      </Form.Item>
    </Modal>
  );
};

export default IllegalDialog;
